<template>
  <div class="typical-home">
    <a-row :gutter="[24,24]">
      <!-- 待办事项 -->
      <a-col :span="16" class="module-list">
        <a-card
          :bordered="false"
          :hoverable="true"
          title="待办事项">
          <template slot="extra">
            <a-icon type="more" />
          </template>
          <div class="module-in module-in01">
            <a-list :grid="{ gutter: 8, column: 3 }" :data-source="data" class="list-totality">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-card>
                  <p>{{ item.title }}</p>
                  <span>{{ item.data }}</span>
                </a-card>
              </a-list-item>
            </a-list>
            <a-list item-layout="horizontal" :data-source="detaildata" class="list-detail">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta>
                  <template slot="description">
                    <span>{{ item.state }}</span>
                    <span>{{ item.txt }}</span>
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>{{ item.hint }}</span>
                      </template>
                      <a-icon type="question-circle" />
                    </a-tooltip>
                    <a>办理</a>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </div>
        </a-card>
      </a-col>
      <!-- 消息通知 -->
      <a-col :span="8" class="module-list">
        <a-card
          :bordered="false"
          :hoverable="true"
          title="消息通知">
          <template slot="extra">
            <a-icon type="more" />
          </template>
          <div class="module-in module-in06">
            <a-list item-layout="horizontal" :data-source="noticedata">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta>
                  <a slot="description" class="msgTitle" :href="item.url">{{ item.state }}{{ item.title }}</a>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
// 待办事项
const data = [{
  title: '待审批',
  data: '10'
},
  {
    title: '待提交',
    data: '10'
  },
  {
    title: '待阅示',
    data: '4'
  }
]

const detaildata = [{
  state: '【待审批】',
  txt: '公告发布审批公告发布审批公告发布审批公告发布审批公告发布审批公告发布审批公告发布审批公告发布审批',
  hint: '公告发布审批说明1'
},
  {
    state: '【待提交】',
    txt: '差旅费报销差旅费报销',
    hint: '公告发布审批说明2'
  },
  {
    state: '【待提交】',
    txt: '录用管理',
    hint: '公告发布审批说明3'
  },
  {
    state: '【待审批】',
    txt: '通知公告',
    hint: '公告发布审批说明4'
  }
]

// 公告
const noticedata = [{
  state: '【升级】',
  title: '1月6日DOS高防（国际）升级通知',
  url: 'https://www.baidu.com'
},
  {
    state: '【升级】',
    title: '商标局2021年元旦期间服务器异常停止商标递交申请通知',
    url: 'https://www.antdv.com/'
  },
  {
    state: '【升级】',
    title: '1月消息列队',
    url: 'https://www.baidu.com'
  },
  {
    state: '【升级】',
    title: '1月6日DOS高防（国际）升级通知',
    url: 'https://www.baidu.com'
  },
  {
    state: '【升级】',
    title: '商标局2021年元旦期间服务器异常停止商标递交申请通知',
    url: 'https://www.baidu.com'
  },
  {
    state: '【升级】',
    title: '商标局2021年元旦期间服务器异常停止商标递交申请通知',
    url: 'https://www.baidu.com'
  }
]
export default {
  name: 'Transaction',
  data () {
    return {
      data,
      detaildata,
      noticedata
    }
  },
  methods: {
    callback (key) {
      console.log(key)
    }
  }
}
</script>

<style lang='less' scoped>
.msgTitle{
  color: #444;
  &:hover{
    color: #2f54eb;
  }
}
</style>
